<template>
    <view :class="ns.b()">
        <!-- 用户信息展示区 -->
        <view class="user">
            <!-- 用户头像 -->
            <view class="avatar" :style="{ backgroundImage: `url(${user.avatar})` }"></view>

            <!-- 用户名称与副信息 -->
            <view class="name">
                <view class="text">
                    <text>{{ user.name }}</text>

                    <view class="create-time">
                        <text>1分钟前</text>
                    </view>
                </view>
                <view>
                    <view class="comment-text">
                        <view>{{ content }}</view>
                        <view class="reply-text">
                            <view class="start">
                                <uni-icons type="hand-up" size="16" color="#333333" />
                            </view>
                            <text @click="onReply">回复</text>
                        </view>
                    </view>

                    <view class="reply">
                        <slot />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { useNamespace } from "@/hooks";

const ns = useNamespace("comment");

const emits = defineEmits(["reply"]);

const props = defineProps({
    user: {
        type: Object,
        default: () => {
            return {
                name: "",
                avatar: ""
            };
        }
    },
    content: {
        type: String,
        default: ""
    }
});

const onReply = () => {
    emits("reply", props.user);
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
